<template>
  <div id="wrap">
    <el-table class="box" :data="goodsList" border style="width: 100%">
      <el-table-column label="行号" width="60">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="state" label="状态" width="60">
        <template slot-scope="scope">
          <span>
            {{scope.row.state == 0
            ? "已驳回"
            : scope.row.state == 1
            ? "已通过"
            : "待审核"
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="documentid" label="单据编号" :width="110"></el-table-column>
      <el-table-column prop="createtime" label="创单时间" :width="110"></el-table-column>
      <el-table-column prop="typeName" label="商品类别"></el-table-column>
      <el-table-column prop="name" label="供应商"></el-table-column>
      <el-table-column prop="shopid" label="入库门店"></el-table-column>
      <el-table-column prop="counterid" label="柜台/类库名称" width="100"></el-table-column>
      <el-table-column prop="orderid" label="订单号"></el-table-column>
      <el-table-column prop="number" label="数量"></el-table-column>
      <el-table-column prop="weight" label="重量"></el-table-column>
      <el-table-column prop="cost" label="成本"></el-table-column>
      <el-table-column prop="coefficient" label="系数"></el-table-column>
      <el-table-column prop="labelamount" label="标签金额"></el-table-column>
      <el-table-column prop="from" label="来源"></el-table-column>
      <el-table-column prop="createperson" label="创单人"></el-table-column>
      <el-table-column prop="approver" label="审批人"></el-table-column>
      <el-table-column prop="approverdate" label="审批日期" :width="110"></el-table-column>
      <el-table-column style="text-align: center" label="操作" width="300">
        <template slot-scope="scope">
          <el-button
            class="changeBtn"
            @click="handleClick(scope.row, true)"
            type="primary"
            size="small"
            :disabled="scope.row.state == 1"
            v-if="scope.row.state != '0'"
          >通过</el-button>
          <el-button
            class="changeBtn"
            @click="handleClick(scope.row, false)"
            type="primary"
            size="small"
            v-if="scope.row.state != '1'"
          >
            {{
            scope.row.state == "0"
            ? "撤销驳回"
            : scope.row.state == "2"
            ? "驳回"
            : ""
            }}
          </el-button>
          <el-button
            @click="delById(scope.row.id)"
            class="changeBtn"
            type="danger"
            size="small"
          >快捷出库</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { updateStatus } from "@/http/codedIntoStorageApi.js";
export default {
  name: "GoodsInbounchList",
  props: ["goodsList"],
  data() {
    return {};
  },
  created() {},
  watch: {},
  computed: {},
  methods: {
    // 操作按钮
    handleClick(item, flag) {
      let status;
      console.log(item);
      // 已通过,状态为1
      if (item.state == "1") return;
      // 待审批（通过/驳回）和 已驳回
      if (flag) {
        // 点击通过按钮
        status = 1;
      } else {
        // 状态为已驳回时按钮为撤销驳回，修改其状态为 2（待审批），反之修改其状态为 0（已驳回）
        status = item.state == "0" ? "2" : "0";
      }
      let userName = localStorage.getItem("username");
      updateStatus(item.id, status, userName).then(res => {
        if (res.data.code == 200) {
          this.$message.success("操作成功");
          item.state = status;
          item.approver = userName;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 出件
    delById(id) {
      this.$emit("formDelById", id);
    }
  }
};
</script>

<style lang="scss">
#wrap {
  .box {
    font-size: 12px;
    height: 520px;
    box-shadow: 0 0 2px #333;
    overflow-y: scroll;
    .changeBtn {
      width: 80px;
      padding: 10px 0;
    }
  }
  .el-table .el-table__cell {
    text-align: center;
  }
}
</style>